/** Component: Badges (alpha, beta, plans, feature flags, new/updated…) */
@use './mixins' as *;

@mixin badge-tooltip {
  --custom-badge-tooltip-width: 220px;
  font-weight: 400;
  visibility: hidden;
  width: var(--custom-badge-tooltip-width);
  background-color: var(--custom-badge-tooltip-background-color);
  color: var(--custom-badge-tooltip-color);
  text-align: center;
  border-radius: 6px;
  padding: 8px;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: calc(-1 * var(--custom-badge-tooltip-width) / 2);
  text-transform: initial;
  font-size: var(--strapi-font-size-ssm);
  line-height: var(--strapi-line-height-sm);


  &::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border-width: 6px;
    border-style: solid;
    border-color: var(--custom-badge-tooltip-background-color) transparent transparent transparent;
  }
}

@mixin badge-content-tooltip {
  font-weight: 400;
  visibility: hidden;
  background-color: var(--custom-badge-tooltip-background-color);
  color: var(--custom-badge-tooltip-color);
  text-align: center;
  border-radius: 6px;
  padding: 8px;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  width: var(--custom-badge-content-tooltip-width);
  margin-left: calc(-1 * var(--custom-badge-content-tooltip-width) / 2);
  text-transform: initial;
  font-size: var(--strapi-font-size-ssm);
  line-height: var(--strapi-font-size-sm);

  &::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border-width: 6px;
    border-style: solid;
    border-color: var(--custom-badge-tooltip-background-color) transparent transparent transparent;
  }
}

.badge {
  --custom-badge-background-color: var(--strapi-neutral-200);
  --custom-badge-color: var(--strapi-neutral-800);
  --custom-badge-font-size: var(--strapi-font-size-xxs);
  --custom-badge-line-height: var(--strapi-line-height-xs);

  --custom-selection-background-color: var(--custom-badge-color);

  --ifm-badge-background-color: var(--custom-badge-background-color);
  --ifm-badge-color: var(--custom-badge-color);
  --ifm-badge-border-radius: var(--strapi-spacing-1);
  --ifm-badge-padding-horizontal: 7px;
  --ifm-badge-padding-vertical: 6px;

  --ifm-font-weight-bold: var(--strapi-font-size-sm);
  --ifm-link-color: var(--ifm-badge-color);
  --ifm-link-hover-color: var(--ifm-badge-color);

  position: relative;
  top: var(--custom-badge-inside-titles-top);
  font-size: var(--custom-badge-font-size);
  font-weight: 500;
  letter-spacing: 0.3px;
  text-align: center;
  text-transform: uppercase;
  border: 1px solid var(--custom-badge-border-color);
  margin-bottom: 6px;

  a {
    text-decoration: none;
  }

  .strapi-icons {
    margin-right: 6px;
    font-size: 12px;
    position: relative;
    top: 1px;
  }

  &-link {
    font-weight: 500;
    text-decoration: none;
  }

  & + .badge {
    margin-left: 2px;
  }

  &--alpha,
  &--beta,
  &--version {
    height: 27px;
    position: relative;
    padding-top: 8px;
    font-weight: 600;
  }

  &--alpha {
    --custom-badge-background-color: var(--strapi-warning-100);
    --custom-badge-color: var(--strapi-warning-600);
    --custom-badge-border-color: var(--strapi-warning-200);
  }

  &--beta {
    --custom-badge-background-color: var(--strapi-secondary-100);
    --custom-badge-color: var(--strapi-secondary-600);
    --custom-badge-border-color: var(--strapi-secondary-200);
  }

  &--version {
    --custom-badge-background-color: var(--strapi-neutral-100);
    --custom-badge-color: var(--strapi-neutral-600);
    --custom-badge-border-color: var(--strapi-neutral-200);
    --custom-badge-tooltip-background-color: var(--custom-badge-background-color);
    --custom-badge-tooltip-color: var(--strapi-neutral-600);
  }

  &--featureflag {
    --custom-badge-background-color: var(--strapi-alternative-100);
    --custom-badge-color: var(--strapi-alternative-600);
    --custom-badge-border-color: var(--strapi-alternative-200);
    --custom-badge-tooltip-background-color: var(--custom-badge-background-color);
  }

  &--enterprise {
    --custom-badge-background-color: var(--strapi-warning-600);
    --custom-badge-color: var(--strapi-neutral-0);
    --custom-badge-tooltip-background-color: var(--strapi-warning-100);
    --custom-badge-tooltip-color: var(--custom-badge-background-color);

    a {
      color: inherit;
    }
  }

  &--growth {
    --custom-badge-background-color: var(--strapi-primary-600);
    --custom-badge-color: white;
    --custom-badge-tooltip-background-color: var(--strapi-primary-100);
    --custom-badge-tooltip-color: var(--custom-badge-background-color);

  }

  &--sso {
    --custom-badge-background-color: #33324D;
    --custom-badge-color: var(--strapi-neutral-0);
    --custom-badge-border-color: #33324D;
    --custom-badge-tooltip-background-color: var(--custom-badge-background-color);

    a {
      color: inherit;
    }
  }

  &--growth a,
  &--enterprise a {
    color: white !important;
  }

  &--pro {
    --custom-badge-background-color: var(--strapi-primary-600);
    --custom-badge-color: #fff;
    --custom-badge-tooltip-background-color: var(--strapi-primary-100);
    --custom-badge-tooltip-color: var(--custom-badge-background-color);
  }

  &--scale {
    --custom-badge-background-color: rgb(154, 53, 242);
    --custom-badge-color: #fff;
    --custom-badge-tooltip-background-color: var(--strapi-alternative-100);
    --custom-badge-tooltip-color: var(--custom-badge-background-color);
  }

  &--essential {
    --custom-badge-background-color: var(--strapi-success-600);
    --custom-badge-color: #fff;
    --custom-badge-tooltip-background-color: var(--strapi-success-100);
    --custom-badge-tooltip-color: var(--custom-badge-background-color);
  }

  &__link {
    .strapi-icons {
      // vertical-align: bottom;
    }
  }

  &--content {
    height: 20px;
    font-weight: 500;
    font-size: 12px;
    line-height: 20px;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    min-width: 52px;
    border: 1px solid var(--custom-badge-border-color);
  }

  &--new {
    --custom-badge-background-color: var(--strapi-alternative-100);
    --custom-badge-border-color: var(--strapi-alternative-200);
    --custom-badge-color: var(--strapi-alternative-600);
    --custom-badge-tooltip-background-color: var(--custom-badge-background-color);
    --custom-badge-content-tooltip-width: 130px;

    --ifm-badge-padding-horizontal: 2px;
    --ifm-badge-padding-vertical: 2px;
  }

  &--updated {
    --custom-badge-background-color: var(--strapi-secondary-100);
    --custom-badge-border-color: var(--strapi-secondary-200);
    --custom-badge-color: var(--strapi-secondary-600);
    --custom-badge-tooltip-background-color: var(--custom-badge-background-color);
    --custom-badge-content-tooltip-width: 120px;

    --ifm-badge-padding-horizontal: 2px;
    --ifm-badge-padding-vertical: 2px;

    flex-shrink: 0;
  }
}

h1 + .h1-badges-container {
  margin: 0;
}

.h1-badges-placeholder {
  // styles already defined in the JS hook: src/hooks/useBadgeReorder
}

.h1-badges-container {
  .badge {
    // transitions already defined in the JS hook: src/hooks/useBadgeReorder
  }
}

/**
 * New/updated badges in main content gutter
 */
main .badge--content {
  position: absolute;
  left: -36px;
  min-width: 0;
  max-width: 22px;

  .badge__text {
    display: none;
  }

  .strapi-icons {
    left: 2px;
    top: -2px;
  }

  .badge__tooltip {
    @include badge-content-tooltip();
  }

  &.badge--updated {
    .badge__tooltip {
      --custom-badge-tooltip-background-color: var(--strapi-secondary-100);
      --custom-badge-tooltip-color: var(--strapi-secondary-600);
    }
  }
  &.badge--new {
    .badge__tooltip {
      --custom-badge-tooltip-background-color: var(--strapi-alternative-100);
      --custom-badge-tooltip-color: var(--strapi-alternative-600);
    }
  }
  
  &:hover .badge__tooltip {
    visibility: visible;
  }
}

main h2 + .badge--content:hover .badge__tooltip,
main h3 + .badge--content:hover .badge__tooltip,
main h4 + .badge--content:hover .badge__tooltip,
main h5 + .badge--content:hover .badge__tooltip,
main h6 + .badge--content:hover .badge__tooltip {
  visibility: hidden !important;
  display: none !important;
}

main .badge--featureflag,
main .badge--developer,
main .badge--essential,
main .badge--team,
main .badge--scale,
main .badge--pro,
main .badge--enterprise,
main .badge--growth,
main .badge--sso,
main .badge--version {
  .badge__tooltip {
    @include badge-tooltip();
  }
  &:hover .badge__tooltip {
    visibility: visible;
  }
}

main .badge--featureflag .badge__tooltip {
  --custom-badge-tooltip-width: 190px !important;
}
main .badge--version .badge__tooltip {
  --custom-badge-tooltip-width: 200px !important;
}

main h1:has(.badge--content),
main h2:has(.badge--content),
main h3:has(.badge--content),
main h4:has(.badge--content),
main .theme-admonition:has(.badge--content),
main .badge--content + img,
main [class*="tabItem"]:has(.badge--content),
main [class*="collapsibleContent"]:has(.badge--content),
main .badge--content:has( + [class*="codeBlockContainer"]),
main .badge--content:has(+ table) + table,
main p:has(.badge--content) {
  position: relative;
}

main h1:has(.badge--content) .badge--content {
  top: 6px;
}
main h2:has(.badge--content) .badge--content {
  top: 30px;
}
main h3:has(.badge--content) .badge--content {
  top: 4px;
}
main h4:has(.badge--content) .badge--content {
  top: 2px;
}
main .theme-admonition:has(.badge--content) .badge--content {
  top: -4px;
}
main [class*="collapsibleContent"]:has(.badge--content) .badge--content {
  top: 20px;
  left: -60px;
}
main p:has(+ .badge--content + [class*="codeBlockContainer"]) {
  margin-bottom: 0;
}
main .badge--content + img {
  position: relative;
  top: -12px;
}
main .badge--content:has(+ img) {
  position: relative;
  top: 12px;
}
/**
 * Adjustments for code blocks as we can't rely on child elements positioning
 */
main .badge--content:has(+ [class*="codeBlockContainer"]) {
  top: 42px;
}
main [class*="tabItem"] .badge--content + [class*="codeBlockContainer"] {
  position: relative;
  top: -26px !important;
}
main [class*="tabItem"] .badge--content:has(+ [class*="codeBlockContainer"]) {
  top: 0;
}
/**
 * Adjustments for tables as we can't rely on table-based positioning
 */
main .badge--content:has(+ table) {
  position: relative;
  top: 26px;
}
// Adjustment for when the sidebar is collapsed
[class*="docSidebarContainerHidden"] ~ main .badge--content:has(+ table) {
  left: 210px;
}

/**
 * New/updated badges in TOC (sidebar)
 */
.menu .badge--content {
  > span {
    position: relative;
    top: -3px;
  }
  .badge__text {
    font-size: var(--strapi-font-size-xxs);
    font-weight: 600;
    position: relative;
    right: 2px;
  }
  .badge--new {
    min-width: 57px;
  }
  .badge--updated {
    min-width: 84px;
  }
  .strapi-icons {
    left: 1px;
  }
  .badge__tooltip {
    display: none;
  }
}
.menu__link:has(.badge--content) {
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  .badge--content {
    margin-left: auto;
  }
}

/**
 * Spacing adjustments
 */
h1 .badge {
  --custom-badge-inside-titles-top: -.4em;
}
h2 .badge {
  --custom-badge-inside-titles-top: -.3em;
}

.badge + p {
  margin-top: 48px;
}
.theme-admonition {
  .badge + p {
    margin-top: 0;
  }
}

/* Reduce spacing after badges that follow headings */
h2 + .badge:not(.badge--inline) ~ p,
h3 + .badge:not(.badge--inline) ~ p,
h4 + .badge:not(.badge--inline) ~ p,
h5 + .badge:not(.badge--inline) ~ p,
h6 + .badge:not(.badge--inline) ~ p {
  margin-top: 1rem;
}

/**
 * On mobile, badges can not necessarily
 * be shown in the gutter, because there is not enough
 * space, so we adjust their position
 */

// Disabled for now — we simply hide them on mobile
// @media (max-width: 720px) {
//   main h1:has(.badge--content),
//   main h2:has(.badge--content),
//   main h3:has(.badge--content),
//   main h4:has(.badge--content),
//   main .theme-admonition:has(.badge--content),
//   main .badge--content + img,
//   main [class*="tabItem"]:has(.badge--content),
//   main [class*="collapsibleContent"]:has(.badge--content),
//   main .badge--content:has( + [class*="codeBlockContainer"]),
//   main .badge--content:has(+ table) + table,
//   main p:has(.badge--content) {
//     .badge--content {
//       position: relative;
//       right: 0;
//       left: initial;
//       top: 0;
//     }
//   }
//   main p:has(.badge--content) .badge--content {
//     margin-right: 6px;
//   }
//   main .theme-admonition:has(.badge--content) .badge--content {
//     top: 2.3em;
//     left: -2.2em;
//   }
//   .badge__tooltip {
//     position: absolute !important;
//     right: 0;
//     min-width: 100%;

//   }

//   .badge--updated,
//   .badge--new {
//     .badge__tooltip {
//       // hide the "bubble" arrow on mobile for these
//       &::after {
//         display: none;
//       }
//     }
//   }

@media (max-width: 1259px) {
  main h1:has(.badge--content),
  main h2:has(.badge--content),
  main h3:has(.badge--content),
  main h4:has(.badge--content),
  main .theme-admonition:has(.badge--content),
  main .badge--content + img,
  main [class*="tabItem"]:has(.badge--content),
  main [class*="collapsibleContent"]:has(.badge--content),
  main .badge--content:has( + [class*="codeBlockContainer"]),
  main .badge--content:has(+ table) + table,
  main p:has(.badge--content) {
    .badge--content {
      display: none;
    }
  }
}


//   /**
//    * Display new/updated badges toolitps
//    * on the right of the badge on screens smaller than 720px
//    * instead of on top for larger screens
//    */
//   .badge--updated .badge__tooltip {
//     min-height: 44px;
//     left: 85px !important;
//     top: -60%;
//   }
//   .badge--new .badge__tooltip {
//     min-height: 28px;
//     left: 90px !important;
//     top: -25%;
//   }
// }


/**
 * Inline badges for tabs and other inline contexts
 */
 .badge--inline {
  position: relative;
  top: -1px;
  margin-left: 0.25rem;
  margin-bottom: 0;
  vertical-align: middle !important;
  display: inline-block;
  height: 26px;
  
  // Smaller size for inline usage
  --ifm-badge-padding-horizontal: 4px;
  --ifm-badge-padding-vertical: 2px;
  --custom-badge-font-size: 10px;
  
  // Remove any absolute positioning
  position: relative !important;
  left: auto !important;
  right: auto !important;
  
  // Ensure tooltip works properly in inline context
  .badge__tooltip {
    @include badge-tooltip();
    // Adjust tooltip position for inline badges
    bottom: 200%;
    left: 50%;
    margin-left: calc(-1 * var(--custom-badge-tooltip-width) / 2);
  }

  .badge__link {
    position: relative;
    top: 2px;
  }
  
  &:hover .badge__tooltip {
    visibility: visible;
  }
}

/**
 * Specific styles for badges in tabs
 */
.tabs {
  [role="tab"] {
    .badge--inline {
      // Ensure proper alignment within tab label
      vertical-align: baseline;
      margin-left: 0.5rem;
      
      // Slightly larger for better visibility in tabs
      --ifm-badge-padding-horizontal: 5px;
      --ifm-badge-padding-vertical: 3px;
      --custom-badge-font-size: 10px;
      
      // Prevent badge from affecting tab height
      line-height: 1;
    }
    
    // Handle hover states for tabs with badges
    &:hover .badge--inline {
      // Maintain badge colors on tab hover
      --custom-badge-background-color: var(--custom-badge-background-color);
      --custom-badge-color: var(--custom-badge-color);
    }
  }
}

/**
 * Responsive adjustments for inline badges
 */
@include medium-down {
  .badge--inline {
    // Slightly smaller on mobile
    --ifm-badge-padding-horizontal: 3px;
    --ifm-badge-padding-vertical: 2px;
    --custom-badge-font-size: 9px;
    
    .badge__tooltip {
      // Adjust tooltip for mobile
      --custom-badge-tooltip-width: 150px;
    }
  }
}


/** Dark mode */
@include dark {
  .badge {
    &--new {
      --custom-badge-background-color: var(--strapi-neutral-100);
      --custom-badge-color: var(--strapi-alternative-500);
    }
    &--updated {
      --custom-badge-background-color: var(--strapi-neutral-100);
      --custom-badge-color: var(--strapi-secondary-200);
    }
    &--new,
    &--updated {
      --custom-badge-border-color: var(--strapi-neutral-200);

      .badge__tooltip {
        --custom-badge-tooltip-background-color: var(--strapi-neutral-100);
        --custom-badge-tooltip-color: var(--strapi-neutral-800);
      }

      .strapi-icons {
        color: var(--strapi-neutral-1000) !important;
      }
    }
    &--enterprise {
      --custom-badge-color: var(--strapi-neutral-1000);
      --custom-badge-tooltip-background-color: var(--strapi-neutral-100);
      --custom-badge-tooltip-color: var(--strapi-warning-100);
    }
    &--growth {
      --custom-badge-background-color: #4945ff;
      --custom-badge-color: white;
      --custom-badge-tooltip-background-color: var(--strapi-neutral-100);
    }
    &--sso {
      --custom-badge-color: #242432;
      --custom-badge-background-color: #DCDCE3;
      --custom-badge-border-color: #32324D;
      --custom-badge-tooltip-color: #DCDCE3;
      --custom-badge-tooltip-background-color: var(--strapi-neutral-100);
    }
    &--alpha,
    &--beta,
    &--featureflag,
    &--version,
    &--inline {
      --custom-badge-background-color: var(--strapi-neutral-100) !important;
      --custom-badge-border-color: var(--strapi-neutral-200);
    }
    &--beta {
      --custom-badge-color: var(--strapi-secondary-200);
    }
    &--featureflag {
      --custom-badge-color: var(--strapi-alternative-500);
      --custom-badge-tooltip-color: var(--strapi-alternative-100);
      .strapi-icons {
        color: var(--strapi-alternative-200) !important;
      }
    }
    &--pro {
      --custom-badge-background-color: #4945FF;
      --custom-badge-tooltip-color: var(--strapi-primary-200);
    }
    &--developer {
      --custom-badge-tooltip-background-color: var(--strapi-neutral-100);
      --custom-badge-tooltip-color: var(--strapi-success-100);
    }
    &--team {
      --custom-badge-tooltip-background-color: var(--strapi-neutral-100);
      --custom-badge-tooltip-color: var(--strapi-alternative-100);
    }
    &--version {
      --custom-badge-color: var(--strapi-neutral-400);
      --custom-badge-tooltip-color: var(--strapi-neutral-700);
    }
  }

  .badge--inline {
    // Ensure proper contrast in dark mode
    &.badge--beta {
      --custom-badge-background-color: var(--strapi-secondary-100);
      --custom-badge-color: var(--strapi-secondary-200);
    }
    
    &.badge--alpha {
      --custom-badge-background-color: var(--strapi-warning-100);
      --custom-badge-color: var(--strapi-warning-200);
    }
    
    // Tooltip adjustments for dark mode
    .badge__tooltip {
      --custom-badge-tooltip-background-color: var(--strapi-neutral-100);
      --custom-badge-tooltip-color: var(--strapi-neutral-800);
    }
  }
}

// main [role="tablist"] ~ .margin-top--md {
//   [role="tabpanel"]:has(.badge) {
//     // background-color: tomato;
//     position: relative;

//     .badge {
//       // background-color: tomato;
//       position: absolute;
//       top: -4em;
//       left: 10%;
//       // position: absolute;
//       display: inline-block;
//       // top: 0;
//       // left: 20px;
//     }
//   }

// }
// // main [role="tab"],
// main [role="tab"] + [role="tabpanel"]:has(.badge) {
//   background-color: yellow;
// }
// // [role="tab"] {
// //   background-color: yellow;
// // }

// main [role="tablist"] ~ .margin-top--md {
// }

main [role="tablist"] + .margin-top--md:has([role="tabpanel"] .badge) {
  position: relative;
  z-index: -1;
  // border: solid 1px blue;
  padding-top: 57px;
  top: -57px;
  margin-bottom: -57px;
}
main [role="tablist"] + .margin-top--md:has([role="tabpanel"] .badge) [role="tabpanel"] .badge {
  // background-color: yellow !important;
  position: absolute;
  top: 1.5em;
  right: 43%;
  // z-index: 100;
}

.tabs-container:has([role="tablist"] + .margin-top--md [role="tabpanel"] .badge) {
  [role="tablist"] {
    position: relative;
    // display: flex;
    // flex-direction: row;

    [role="tab"] {
      // border: solid 1px green;
      // background-color: green !important;
      // padding-right: 60px;
    }
  }
}

/**
 * Force headings followed by badges to be block-level
 * so badges wrap to next line naturally
 */
h2:has(+ .badge:not(.badge--inline)),
h3:has(+ .badge:not(.badge--inline)),
h4:has(+ .badge:not(.badge--inline)),
h5:has(+ .badge:not(.badge--inline)),
h6:has(+ .badge:not(.badge--inline)) {
  display: block !important;
  margin-bottom: 0;
}

/* Style the badges that follow headings */
h2 + .badge:not(.badge--inline),
h3 + .badge:not(.badge--inline),
h4 + .badge:not(.badge--inline),
h5 + .badge:not(.badge--inline),
h6 + .badge:not(.badge--inline) {
  margin-top: 0.5rem;
}